<template>
  <div class="box">
    <van-tabs v-model="active">
      <van-tab v-for="index in title" :key="index.id" :title="index.title">
        {{ index.title }}
        <div v-if="!list.length">
            <van-empty description="描述文字" />
        </div>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div class="cartlist" v-for="item in list" :key="item.id">
              <router-link :to="'/cartdateils/'+item.id">
                <p>{{ item.time }}&emsp;<span>29分30 &ensp;待付款</span></p>
                <div class="cart">
                  <van-image width="80" height="80" lazy-load :src="item.img" />
                  <div class="s">
                    <span>{{ item.title }}</span>
                    <br />
                    <span>￥{{ item.price }}&ensp;x3</span>
                  </div>
                </div>
                <hr />
                <span>取消订单</span>
                &emsp;
                <span>立即支付</span>
              </router-link>
            </div>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script setup>
import { ref } from "vue";
const title = ref([
  {
    title: "全部",
  },
  {
    title: "待支付",
  },
  {
    title: "已支付",
  },
  {
    title: "待出货",
  },
  {
    title: "已出货",
  },
]);

import axios from "axios";
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);

const onLoad = () => {
  setTimeout(() => {
    if (refreshing.value) {
      list.value = [];
      refreshing.value = false;
    }

    axios.get("/getcartlist").then((resp) => {
      console.log(123, resp);
      list.value = list.value.concat(resp.data.list);
    });
    loading.value = false;

    if (list.value.length >= 40) {
      finished.value = true;
    }
  }, 1000);
};

const onRefresh = () => {
  // 清空列表数据
  finished.value = false;

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  onLoad();
};
</script>
<style lang='scss' scoped>
.cartlist {
  width: 100%;
  height: 200px;
  background: pink;
  padding-top: 10px;
  margin-top: 10px;
  .s {
    float: right;
    margin-right: 160px;
  }
}
a{
    color: #000;
}
</style>